<template>
    <!-- /e jtbsm-header -->
    <div>

        <div class="mod-index-wrap">

            <!-- S 主屏背景 -->
            <div id="banner" data-rsc="9481" style=" background: linear-gradient(177deg, #FF812D 0%, #E02020 100%);;">
                
            </div>
            <!-- E 主屏背景 -->

            <!-- S banner -->
            <v-banner />
            <!-- E banner -->

        </div>

        <div class="mod-index-list">

            <div class="wrap-recGameLive" id="wrap-recGameLive">
                <!-- 猜你喜欢 -->
                <div class="live-box j_index-live-box vhy-banner-wrap" v-for="(dl,index) in dataList" >
                    <!-- 标题 -->
                    <div class="box-hd">
                        <h2 class="title">
                            <a class="j_index-game-title" :data-gid="index" :data-gname="dl.className" href="javascript:void(0)">{{dl.className}}</a>
                        </h2>

                        <ul class="more-list">

                            <li class="j_anchor_label " v-for="childItem in dl.childClassNameList">
                                <a class="grey" href="javascript:void(0)" @click="moreLiveInfo(childItem.split('-')[1])">{{childItem.split('-')[0]}}</a>
                            </li>

                        </ul>

                        <ul class="more-info">
                            <li>
                                <a class="j_index-live-more" :data-gid="index" :data-gname="dl.className" href="javascript:void(0)" @click="moreLiveInfo(dl.pathName)">更多
                                    <i class="index-more-icon"></i>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="box-bd" v-if="dl.className!='游戏'">
                        <ul class="index-list clearfix j_live-list " style="max-height:430px">
                            <li class="game-live-item" gid="1" data-lp="1033759016" v-for="(item,index) in dl.dataList"
                                @click="viewDetail(item.liveLink,item.id,item.labelName)" :key="index">

                                <a href="javascript:void(0)" class="video-info ">
                                    <img class="pic" :data-original="item.imgBase" :src="item.imgBase"
                                        data-default-img="338x190" :alt="item.hostName" :title="item.hostName">

                                    <em class="tag tag-recommend">{{item.labelName}}</em>

                                    <div class="item-mask"></div>
                                    <i class="btn-link__hover_i"></i>

                                    <!-- <p class="tag-right">
                                        <em class="tag-blue" v-if="item.isLiveing">直播中...</em>
                                    </p> -->
                                </a>
                                <a href="javascript:void(0)" class="title" :title="item.liveContent">{{item.liveContent}}</a>
                                <span class="txt">
                                    <span class="avatar fl">
                                        <img :data-original="item.imgBase" :src="item.imgBase" data-default-img="84x84"
                                            :alt="item.hostName" :title="item.hostName">
                                        <i class="nick" :title="item.hostName">{{item.hostName}}</i>
                                    </span>

                                    <span class="num"><i class="num-icon"></i><i class="js-num"> </i></span>
                                </span>
                            </li>
                        </ul>
                    </div>

                    <!-- 游戏 -->
                    <div class=" mod-main clearfix" v-if="dl.className=='游戏'">
                        <!--banner轮播图-->
                        <div id="vhy-slide-container" class="vhy-slide-container">
                            <ul class="ui-switchable-content clearfix" style="width: 1900px; left: 0px;">
                                <li class="ui-switchable-panel statpid" v-for="(item,index) in dl.dataList" v-if="index==0">
                                    <a href="javascript:void(0)">
                                        <img :src="item.imgBase" :alt="item.liveContent" onerror="this.onerror='';this.src='item.liveContent'">
                                        <h6 class="text">{{item.liveContent}}</h6>
                                    </a>
                                </li>

                            </ul>
                        </div>
                        <!--end banner轮播图-->
                        <!--banner右侧视频列表-->
                        <ul class="vhy-banner-video-list">
                            <li class="video" v-for="(item,index) in dl.dataList" v-if="index>0 && index<7">
                                <a href="javascript:void(0)" class="video-wrap statpid">
                                    <div class="video-s">
                                        <img :src="item.imgBase" class="video-cover" alt="" width="228" height="128">
                                        <div class="video-name">{{item.liveContent}}</div>
                                        <div class="video-mask">
                                            <div class="video-meta">
                                                <div class="meta-name">{{item.liveContent}}</div>
                                                <div class="meta-bottom">
                                                    <span class="b-l">
                                                        <i class="i-anchor"></i>
                                                    </span>
                                                    <span class="b-r">
                                                        <i class="i-playtimes"></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                        <!--end banner右侧视频列表-->
                    </div>

                </div>
            </div>

        </div>

    </div>
</template>
<script>
    import vBanner from '../../common/pc/p-banner.vue'
    // import $ from 'jquery';
    export default {
        data() {
            return {
                dataList: [],
                loading: false,
                searchMsg:""
            }
        },
        components: {
            vBanner
        },
        watch: {
            //切换路由监
            '$route'(toRouter, fromRouter) {
                this.toRouter = toRouter.params.pathMatch;
                this.currentPath = this.toRouter//this.getCurrentTypeCN(this.toRouter);
                this.searchMsg=toRouter.query.searchMsg;
                
                document.body.scrollTop=document.documentElement.scrollTop=0
                this.getData(this.currentPath, this.searchMsg);//初始化页面加载
            }
        },
        mounted() {
            this.toPath = this.$router.history.current.params.pathMatch;//获取路由匹配的参数
            this.currentPath = this.toRouter//this.getCurrentTypeCN(this.toPath);

            this.getData(this.currentPath, this.searchMsg);//初始化页面加载

        },
        methods: {
            getData(currentPath,searchMsg) {
                
                this.loading = true;

                let params = {};
                params.pageSize=10;
                params.currentPath=currentPath;
                params.searchMsg=searchMsg;

                this.$axios.post('/api/projectApi/getNavigationList', params).then((res) => {

                    if (res.data.code == "0") {

                        this.dataList = res.data.data;

                        this.loading = false;

                    }
                    else {
                        this.$message.error(res.data.message)
                    }
                }, (err) => {

                }).then(() => {

                }, (err) => {
                    this.loading = false;

                })
            },
          
            //点击记录点击量
            viewDetail(href, id, labelName) {
                // //记录连接点击量
                this.recordHits(id, labelName);

                window.open(href, 'top');

            },
            
            //记录点击量
            recordHits(id, labelName) {
                let params = {};
                params.id = id;
                params.labelName = labelName;
                params.ip = ('IP地址:' + returnCitySN["cip"] + ', CID:' + returnCitySN["cid"] + ', 地区:' + returnCitySN["cname"] + ",浏览器版本:" + getBrowserInfo());

                this.$axios.post('/api/projectApi/recordHits', params).then((res) => {
                    if (res.data) {
                    }
                }, (err) => {
                }).then(() => {

                }, (err) => {
                })
            },
            moreLiveInfo(pathName){
                this.$router.push({
                    path: pathName
                });
            }
        }
    }
</script>

<style scoped>
    .p-loading {

        color: #ed4856;
        font-size: 16px;
    }

    .w-980 .mod-index-list, .w-980 .mod-index-list .game-extend {
        width: 999px;
        background: #fff;
        border-radius: 10px;
    }
    .wrap-recGameLive{
        padding: 0 20px;
    }
</style>